import { Button, Card, Checkbox, Form, Input, message, Table } from 'antd'
import { SearchOutlined,DeleteOutlined,FormOutlined } from "@ant-design/icons"
import React ,{useEffect, useState}from 'react'
import  type { ColumnsType } from 'antd/lib/table';
import { reqBatchRemoveHospitalList, reqGetHospitalSetList, reqRemoveHospital } from '@/api/hospital/hospitalSet';
import type { HospitalSetList } from '@/api/hospital/model/hospitalSetTypes';
import { useForm } from 'antd/lib/form/Form';
import { useNavigate } from 'react-router-dom';

export default function HospitalSet() {
    //设置组件状态
    //当前页码
    let [page,setPage] = useState(1);
    // 每页展示数量
    let [limit,setLimit] = useState(5);
    //数据  总数
    let [total,setTotal] = useState(0);
    //设置加载中 状态
    let [loading,setLoading] = useState(false);
    //医院设置 的所有数据
    let [hospital,setHospital] = useState<HospitalSetList>([]);

    let [keys,setKeys] = useState<React.Key[]>([]);

    //创建表单 对象
    let [form] = useForm();

    //创建 useNavigate
    let navigate = useNavigate();


    // 创建请求医院设置列表的函数
    let  getHospitalList = async function(){
        //获取表单数据
        let {hosname,hoscode} = form.getFieldsValue();

        //请求前 加 loading
        setLoading(true);
        let result = await reqGetHospitalSetList({page,limit,hosname,hoscode});
        //请求完成后 loading
        setLoading(false);
        // console.log(result);
        //医院设置 数据
        setHospital(result.records);
        // 设置总数
        setTotal(result.total);
        
    }

    // 创建获取表单数据函数  查询
    let finish = ()=>{
        //调用 请求后台数据的函数
        getHospitalList();
    }

    //清空表单搜索 数据
    let reset = ()=>{
        //清空表单数据
        form.resetFields();
        //请求医院设置数据
        getHospitalList();
    }

    //删除一个医院信息
    let remove = (id:number)=>{
        return async ()=>{
            // 请求 api 删除
           await reqRemoveHospital(id);
           message.success("删除成功!");

           // 重新请求 初始化数据
           getHospitalList();
        }

    }

    // 多选框操作
    let change = (selectedRowKeys:React.Key[])=>{
        // console.log(selectedRowKeys);
        setKeys(selectedRowKeys);
    }

    //批量删除
    let removeAll = async ()=>{
        //请求批量删除
        await reqBatchRemoveHospitalList(keys);
        //提示
        message.success("批量删除成功!");
        //请求医院设置数据
        getHospitalList();
    }


    //初始化页面操作
    useEffect(()=>{
        //请求医院设置数据
        getHospitalList();
    },[page,limit])


    //表格表头信息设置
    let columns:ColumnsType<any> = [
        {
            title: "序号",
            width:80,
            align:"center",
            //三个参数  x :当前对应的单个数据  y: 当前的一行数据  index:下标
            render:(x:any,y:any,index:number)=>{
                return index+1;
            }
        },
        {
            title: "医院名称",
            dataIndex: "hosname",
            align:"center"
        },
        {
            title: "医院编号",
            dataIndex: "hoscode",align:"center"
        }, {
            title: "api基础路径",
            dataIndex: "apiUrl",align:"center"
        }, {
            title: "签名",
            dataIndex: "signKey",
            align:"center"
        }, {
            title: "联系人姓名",
            dataIndex: "contactsName",align:"center"
        }, {
            title: "联系人手机号",
            dataIndex: "contactsPhone",
            align:"center"
        }, {
            title: "操作",
            render:(row)=>{
                //当 设置 dataIndex 时,第一参数 就是 dataIndex 值
                //当 不设置 dataIndex 时,第一个参数 是当前的一行数据对象
                return <>
                    <Button  onClick={()=>{
                        navigate(`/syt/dashboard/hospitalSet/edit/${row.id}`);
                    }} icon={<FormOutlined />} type="primary"></Button>
                    <Button onClick={remove(row.id)} className='ml' danger type="primary" icon={<DeleteOutlined />}></Button>
                </>
            },
            fixed:"right",
            align:"center"
        }
    ]

    return (
        <Card>

            {/* 顶部搜索 */}
            <Form
                form={form}
                layout="inline"
                autoComplete="off"
                onFinish={finish}
                onReset={reset}
            >
                <Form.Item
                    name="hosname"
                >
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item
                    name="hoscode"
                >
                    <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                        查询
                    </Button>
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button htmlType="reset" type="default">
                        清空
                    </Button>
                </Form.Item>
            </Form>

            {/* 添加和批量删除 */}
            <div className='h-20'>
                <Button type="primary" onClick={
                    ()=>{
                        navigate("/syt/dashboard/hospitalSet/add");
                    }
                }>
                    添加
                </Button>
                <Button onClick={removeAll} className='ml' type="default" disabled={keys.length === 0} >
                    批量删除
                </Button>
            </div>

            {/* 表格数据 */}
            <Table 
            loading={loading}
            rowKey={"id"}
            pagination={{
                current:page,  // 当前页码
                total:total,  //总数,
                pageSize:limit,
                showQuickJumper:true,  //是否快速跳转至某页
                showSizeChanger:true,  //是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
                pageSizeOptions:[4,6,8,10],    //指定每页可以显示多少条
                showTotal:(total)=>{   //用于显示数据总量和当前数据顺序
                    return <span>当前总数是:{total} 条</span>
                },
                //页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
                onChange:(page: number, pageSize: number)=>{
                    //设置新的页码
                    setPage(page);
                    //设置新的每页展示数量
                    setLimit(pageSize);
                }

            }} 
            rowSelection={{
                type:"checkbox",
                onChange:change
            }}
            scroll={{x:"1400px"}}
            className='h-20'
            bordered 
            columns={columns}
            dataSource={hospital}
            ></Table>
        </Card>
    )
}
